<template>
    <div id="OrderDetails">
        <el-button type="primary" class="goback" @click="goback">返回上一级</el-button>
        <el-button type="success" class="goback" @click="giveMoney" v-if="imgArr.funsStatus=='FUNDING'&&imgArr.funsResult=='DO_WAIT'">提现</el-button>
        <div class="table" v-loading="loading">
            <h3 class="title">详情</h3>
            <div v-for="(item,key) in tabData" :key="key" >
                <div class="tab-item" v-if="item.value&&list[item.name]">
                     <div class="tab-name">{{list[item.name]}}：</div>
                    <div class="tab-val" v-if="list[item.name]== '提现金额'">{{item.value/100}}.00</div>

                    <span class="tab-val" v-else>{{item.value}}</span>
                </div>

            </div>
        </div>



    </div>
</template>

<script>
    import {
        getMoneyDetails,getMoney
    } from "@/api/payCenter/payCenter";
    import Data from './drawDetailsData.js'
export default {
    data(){
        return JSON.parse(JSON.stringify(Data))
    },
    mounted(){
        getMoneyDetails({funsOrderId:this.$route.query.id}).then(res=>{ //获取工单详情数据

                for (let i in res.data){
                     this.imgArr[i] = res.data[i];
                     if(i=="funsStatus"){
                         switch(res.data[i]){
                            case 'CREATEED':
                                res.data[i] = "订单生成";
                                break;
                            case 'FUNDING':
                                res.data[i] = "代付中";
                                break;
                            case 'SUCCESS':
                                res.data[i] = "代付成功";
                                break;
                            case 'FAILED':
                                res.data[i] = "代付失败";
                                break;
                            case 'COMPLETE':
                                res.data[i] = "代付业务处理完成";
                                break;
                            default :
                                break;
                         }
                     }

                     if(i=="funsResult"){
                         switch(res.data[i]){
                            case 'UN_COMFIRM':
                                res.data[i] = "不进行手动处理";
                                break;
                            case 'DO_WAIT':
                                res.data[i] = "待处理";
                                break;
                            case 'SUCCESS':
                                res.data[i] = "已处理";
                                break;
                            default :
                                break;
                         }
                     }
                    res.data.gmtCreate = this.switchTime(res.data.gmtCreate)
                    res.data.gmtUpdate = this.switchTime(res.data.gmtUpdate)
                    let a ={};
                    a.name = i;
                    a.value = res.data[i];

                    this.tabData.push(a)
                }
        })
    },
    methods:{
        goback(){ //返回上一级
              this.$router.push(
                        {path:"/payCenter/drawMoney"}
                    )
        },
        giveMoney(){
             let res ={
             funsOrderId:this.imgArr.funsOrderId,
             funsStatus:'SUCCESS'
         }
         this.$confirm('确定提现?',"提示",{
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
         }).then(()=>{
            getMoney(res).then(res=>{
              console.log(res);
                if(res.data.code == "OK" ){
                     this.$message({
                        type: 'success',
                        message: '提现成功!'
                    });
                }else{
                    this.$message.error(res.data.message)
                }
            })

         })
        }
    }
}
</script>
<style scoped lang="css">
    #OrderDetails{
        width:100%;
        height: 100%;
    }
    .title{
        width: 100%;
        text-align: center;

    }
    .goback{
        margin-top: 15px;
    }
    .table{
        width:800px;
        border: 1px solid #ccc;
        background-color: #fff;
        margin-top: 20px;

    }
    /* .tab-item:last-child{
        border-bottom: 1px solid #ccc;
    } */
    .tab-val{
        display: flex;
        flex-wrap: wrap;
        padding-left: 20px;
        border-left: 1px solid #ccc;
        box-sizing: border-box;
          min-height: 60px;
        align-items: center;
        padding-top:10px;

    }
    .tab-item{
        width: 100%;
        display: flex;
        padding:0 10px;
        box-sizing: border-box;
         border-top: 1px solid #ccc;
        min-height: 60px;
        align-items: center;
    }
    .tab-item .tab-name{
        min-width: 150px;
        min-height: 60px;

        display: flex;
        align-items: center;
    }

</style>
